iT邦幫忙

2024 iThome 鐵人賽

DAY 15
0
Modern Web

React 學得動嗎系列 第 15

[Day 15] React如何規劃專案結構

  • 分享至 

  • xImage
  •  

今天我們要來聊聊如何管理React專案,好的專案結構可以讓其他開發者很清楚該去哪邊找到檔案。

為什麼專案結構很重要?

好的專案結構有助於提升程式的可讀性和維護性,讓團隊成員能夠快速理解程式邏輯,減少出錯機率。同時,清晰的架構能讓開發、測試及擴展功能更加高效。反之,糟糕的專案結構不僅會增加後續維護的難度,也可能導致程式難以擴充、排錯困難,進而影響專案進度和品質。

理想的React專案結構

讓我們來看看一個理想的React專案結構會長什麼樣子:

my-react-app/
├── src/
│   ├── components/          # 可重用的UI組件
│   │   ├── Button/
│   │   │   ├── Button.tsx
│   │   │   ├── Button.test.tsx
│   │   │   └── Button.module.css
│   │   └── ...
│   ├── pages/               # 頁面級組件
│   │   ├── Home/
│   │   │   ├── Home.tsx
│   │   │   └── Home.test.tsx
│   │   └── ...
│   ├── hooks/               # 自定義Hooks
│   ├── utils/               # 工具函數
│   ├── services/            # API相關的服務
│   ├── contexts/            # React contexts
│   ├── types/               # TypeScript類型定義
│   ├── styles/              # 全局樣式
│   └── App.tsx              # 主應用組件
├── public/                  # 靜態資源
├── tests/                   # 端到端測試
├── .eslintrc.js             # ESLint配置
├── .prettierrc              # Prettier配置
├── jest.config.js           # Jest配置
├── tsconfig.json            # TypeScript配置
└── package.json             # 項目依賴和腳本

這個結構有以下幾個優點:

  1. 組件化: 所有UI組件都放在 components 資料夾中,方便重用。
  2. 頁面分離: 頁面級組件放在 pages 資料夾。
  3. 邏輯分離: 自定義Hooks、工具函數和服務都有各自的資料夾。
  4. 類型安全: TypeScript類型定義集中管理。
  5. 測試友好: 每個組件旁邊都有對應的測試文件。

在package.json中設置腳本

讓我們來看看如何在 package.json 中設置一些有用的腳本:

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
    "lint:fix": "eslint src/**/*.{js,jsx,ts,tsx} --fix",
    "format": "prettier --write src/**/*.{js,jsx,ts,tsx,css,md}",
    "type-check": "tsc --noEmit",
    "validate": "npm run lint && npm run type-check && npm run test"
  }
}

這些腳本讓你可以:

  • 啟動開發伺服器 (npm start)
  • 建置生產版本 (npm run build)
  • 運行測試 (npm test)
  • 檢查程式碼風格 (npm run lint)
  • 自動修復程式碼風格問題 (npm run lint:fix)
  • 格式化程式碼 (npm run format)
  • 檢查TypeScript類型 (npm run type-check)
  • 一次執行所有驗證 (npm run validate)

ESLint和Prettier:

ESLintPrettier 是保持程式碼品質和一致性的工具。
ESLint 是一個靜態程式碼分析工具,主要用來確保 JavaScript 程式碼符合既定的規範,幫助開發者發現並修正潛在的錯誤。它能夠統一團隊的編碼風格,避免程式碼中存在不一致的寫法或潛在的問題,從而提升程式碼的品質和可維護性。

Prettier 則是一個程式碼格式化工具,專注於自動統一程式碼的排版和格式。Prettier 可以根據既定的規則,無論是空格、縮排還是標點符號,確保程式碼在不同開發環境中保持一致,減少不必要的程式碼審查問題,讓開發者能專注於程式碼的邏輯本身。

.eslintrc.js 中,你可以這樣配置 ESLint:

module.exports = {
  extends: [
    'react-app',
    'react-app/jest',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  plugins: ['@typescript-eslint', 'react-hooks'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn'
  }
};

而在 .prettierrc 中,你可以這樣配置 Prettier:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "printWidth": 100
}

測試:

在React專案中,我們主要用 JestReact Testing Library 來寫測試。透過這些工具,我們可以有效地檢查程式碼的運作是否符合預期,並確保應用程式在各種情境下都能正常運行,進而提高專案的穩定性和可靠性。

以下是一個簡單的測試例子:

// src/components/Button/Button.test.tsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Button from './Button';

test('按鈕可以被點擊', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>點我</Button>);
  
  userEvent.click(screen.getByText('點我'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

小結

今天我們學習了如何組織 React 專案結構、設置實用的 npm 腳本,並使用 ESLint、Prettier 和 Jest 來確保程式碼的品質與功能的正確性。請記住,良好的專案結構和工具設置不僅能提升開發效率,也能確保程式碼的穩定性。

保持程式碼整潔有序需要持續的投入,雖然過程可能有些繁瑣,但這一切都非常值得。一個結構良好的專案不僅能提升個人的工作效率,也能促進團隊間的協作順暢,讓開發過程更加順利。

如果你想更深入地了解React專案的最佳實踐,可以查看 React官方文件Create React App的文件


上一篇
[Day 14] React 生態系:React Query 和 React Hook Form
下一篇
[Day 16] React 進階技巧:HOC 與 Render Props
系列文
React 學得動嗎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言